<template>
  <view class="padding-sm">
    <view class="app-header">
      <view class="operation-bar cu-bar bg-white">
        <view class="action border-title">
          <text class="text-xl text-bold">我的病情</text>
          <text class="bg-cyan" style="width:2rem"></text>
          <!-- 底部样式 last-child选择器-->
        </view>
      </view>
      <!-- 导航栏 -->
      <nav-bar @fetchDisease="fetchDiseaseList" ref="navBar"></nav-bar>
    </view>
    <!-- 基础信息 -->
    <!-- 疾病信息列表 -->
    <view class="disease-list margin-top-lg" v-if="diseaseList && diseaseList.length > 0">
      <view v-for="item in diseaseList" :key="item.id">
        <view class="disease-item padding flex align-center padding-xl radius shadow shadow-lg "
          @click="handleContainerClick(item.id)">
          <image class="disease-img" :src="imgUrl"></image>
          <view class="text-container">
            <text class="title">{{item.name}}</text>
            <text class="description">KOA等级: {{item.koaGrade}} 级</text>
            <text class="description">KOA描述: {{item.koaDescribe}}</text>
          </view>
        </view>
        <view class="cu-chat">
          <view class="cu-info round">诊断时间：{{item.date}}</view>
        </view>
      </view>
    </view>
    <view v-else>
      <empty-page container-height="100px" text="暂无我的病情" />
    </view>
    <view style="height: 20px;"></view>

  </view>
</template>

<script>
  export default {
    onLoad() {
      // 初始化图片
      if (this.$staticUrl) {
        this.imgUrl = this.$staticUrl + 'page-icon-illness.png';
      } else {
        console.error('staticUrl 未定义');
      }
    },
    methods: {
      // 下拉刷新
      onPullDownRefresh() {
        this.fetchDiseaseList(this.basicId);
      },
      // 跳转到详情页面
      handleContainerClick(id) {
        uni.navigateTo({
          url: '/subpkg/illness_detail/illness_detail?id=' + id
        })
      },
      async fetchDiseaseList(basicId) {
        if (this.isLoading) {
          uni.$showMsg("正在玩命加载中!");
          return;
        }
        this.isLoading = true;
        this.basicId = basicId;
        const {
          data: res
        } = await uni.$http.get(`/info/countList/${basicId}`);
        if (res.code !== 200) return uni.$showMsg()
        this.diseaseList = res.data.reverse();
        this.isLoading = false;
      },
    },
    data() {
      return {
        basicId: undefined,
        diseaseList: [],
        imgUrl: '',
        isLoading: false
      };
    }
  }
</script>

<style lang="scss">
  .app-header {
    margin-bottom: 20px;
    border-radius: 5px;
    padding: 5px;
    height: 110px;
    background-color: white;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .disease-list {
    position: relative;

    // 问卷调查
    .disease-item {
      /* 其他样式 */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      background-color: white;
      /* 浅紫色的十六进制表示 */
      width: 100%;
      height: 100px;
      border-radius: 8px;
      margin-top: 10px;

      /* 添加阴影效果 */
      .disease-img {
        width: 75px;
        height: 75px;
      }

      .text-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 15px;
        margin-top: -3px;

        /* 调整文本容器的上边距，将字体布局偏上 */
        .title {
          color: #000;
          /* 设置标题的颜色为黑色 */
          font-size: 14px;
          /* 设置标题的字体大小为18px */
        }

        .description {
          color: #888;
          margin-top: 2px;
          /* 设置描述的颜色为偏灰色 */
          font-size: 12px;
          /* 设置描述的字体大小为14px */
        }

        .create-time {
          margin-top: 2px;
          color: #999999;
          font-size: 12px;
        }
      }
    }
  }
</style>